<template>
  <el-card class="plugin-card" shadow="hover">
    <div class="plugin-header">
      <h3 class="plugin-name">{{ plugin.name }}</h3>
      <div class="plugin-actions">
        <el-button 
          :icon="plugin.status === 'enabled' ? CircleClose : Open" 
          circle 
          plain
          @click="toggleStatus"
        />
        <el-button 
          icon="Delete" 
          circle 
          plain 
          type="danger"
          @click="deletePlugin"
        />
      </div>
    </div>
    
    <div class="plugin-info">
      <p class="plugin-version">
        <span class="label">版本:</span> 
        {{ plugin.version }} 
        <el-tag size="small" type="info" class="compatibility">
          兼容版本: {{ plugin.compatibleVersion }}
        </el-tag>
      </p>
      <p class="plugin-developer">
        <span class="label">开发者:</span> {{ plugin.developer }}
      </p>
      <p class="plugin-description">{{ plugin.description }}</p>
    </div>
    
    <div class="plugin-footer">
      <el-tag 
        :type="plugin.status === 'enabled' ? 'success' : 'info'" 
        effect="light"
      >
        {{ plugin.status === 'enabled' ? '已启用' : '已禁用' }}
      </el-tag>
      <el-button 
        type="primary" 
        link 
        @click="viewDetail"
      >
        查看详情
      </el-button>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { CircleClose, Open, Delete } from '@element-plus/icons-vue'
import type { PluginDetail } from '@/api/plugin'

// 定义属性
const props = defineProps<{
  plugin: PluginDetail
}>()

// 定义触发事件
const emits = defineEmits(['view-detail', 'toggle-status', 'delete-plugin'])

// 查看详情
const viewDetail = () => {
  emits('view-detail', props.plugin)
}

// 切换状态
const toggleStatus = () => {
  emits('toggle-status', props.plugin)
}

// 删除插件
const deletePlugin = () => {
  emits('delete-plugin', props.plugin)
}
</script>

<style scoped>
.plugin-card {
  border-radius: 12px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.plugin-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.plugin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.plugin-name {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: #303133;
}

.plugin-actions {
  display: flex;
  gap: 8px;
}

.plugin-info {
  margin-bottom: 15px;
}

.plugin-info p {
  margin: 8px 0;
  color: #606266;
  line-height: 1.5;
}

.plugin-version, .plugin-developer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.label {
  font-weight: 600;
  color: #303133;
}

.compatibility {
  margin-left: 8px;
}

.plugin-description {
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
  margin-top: 12px;
}

.plugin-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}
</style> 